{extend name="base" /}
{block name="title"}代理充值{/block}
{block name="head"}
<script src="__STATIC__/common/jweixin-1.4.0.js"></script>
<style>
.weui_panel_hd:after {left:0;}
.weui-payselect-ul {margin-top:0; overflow:visible;}
a.weui-payselect-a {position:relative;}
a.weui-payselect-a span.weui-badge {position:absolute; right:-10px; top:-8px;}
.weui_panel_ft:before {left:0}
</style>
{/block}
{block name="body"}

<div class="weui_panel ms-controller" ms-controller="WEBPAY">

  <div class="weui_panel_hd">
    <div class="weui-flex">
      <div class="weui-flex-item">可用房卡数量: {{@RoomCard}}</div>
    </div>
  </div>

  <div class="weui_panel_bd">
  
    <div class="weui-pay">
      <ul class="weui-payselect-ul">
        <li class="weui-payselect-li" ms-for="(k,v) in @card">
          <a ms-class="['weui-payselect-a', @curr==k&&'weui-payselect-on']" ms-on-tap="@tapCard(k)">{{v.RMB|number(0,'','')}}元<span class="weui-pay-12">{{v.Coin}}</span><span class="weui-badge" ms-if="v.Zeng>0">赠{{v.Zeng}}</span></a>
        </li>
      </ul>
      <a class="weui_btn weui_btn_primary clear" ms-on-tap="@tapPay">确认充值</a>
    </div>
    
  </div>
  <div class="weui_panel_bd">
    <table class="weui-table" >
      <thead>
        <tr><th>#</th><th>订单号</th><th>金额</th><th>时间</th></tr>
      </thead>
      <tbody>
        <tr ms-if="@rows.length<=0"><td colspan="4">Oh~暂无数据!</td></tr>
        <tr ms-if="@rows.length>0" ms-for="(k,v) in @rows">
          <td>{{v.ID}}</td>
          <td>{{v.MerBillNo|truncate(12)}}</td>
          <td class="f-red">+{{v.RMB}}</td>
          <td>{{v.Addtime|date('MM/dd HH:mm')}}</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="weui_panel_ft" style="padding:0">
    <div class="weui-flex pager">
      <a class="weui-flex-item" ms-on-tap="@tapFirst">首页</a>
      <a class="weui-flex-item weui-border-l" ms-on-tap="@tapPre">上一页</a>
      <a class="weui-flex-item weui-border-l">{{@total}}#{{@page}}/{{@totalPage}}</a>
      <a class="weui-flex-item weui-border-l" ms-on-tap="@tapNext">下一页</a>
      <a class="weui-flex-item weui-border-l" ms-on-tap="@tapEnd">尾页</a>
    </div>
  </div>
</div>

{/block}
{block name="foot"}
<script>
avalon.ready(function () {

  wx.config({
    debug: false,
    appId: "{$info.sign.appId|default=''}", // 必填，公众号的唯一标识
    timestamp: "{$info.sign.timestamp|default=''}", // 必填，生成签名的时间戳
    nonceStr: "{$info.sign.nonceStr|default=''}", // 必填，生成签名的随机串
    signature: "{$info.sign.signature|default=''}", // 必填，签名
    jsApiList: ['chooseWXPay']// 必填，需要使用的JS接口列表
  });
  wx.error(function (e) {
    // `wx.config`失败回调, 对于SPA可以在这里更新签名
    console.log(e.errMsg);
  });

  var vm = avalon.define({
    $id: "WEBPAY",
    card: {:json_encode($info.CARDS??[], JSON_UNESCAPED_UNICODE)},
    RoomCard: "{$info.RoomCard|default=0}",
    curr: 0,  // 当前选中第几张卡
    page: "{$page??1}" * 1, // 当前第几页
    size: "{$size??10}" * 1,  // 每页几条
    total: "{$total??0}" * 1, // 总共几条
    rows: {:json_encode($rows??[], JSON_UNESCAPED_UNICODE)},
    $computed: {
      totalPage: {
        get: function () {
          var max = Math.ceil(this.total / this.size); // 最大页数=向上取整
          max = max > 0 ? max : 1;
          return max;
        }
      }
    },
    ajaxPage: function (page) {
      $.req({
        url: "{:url('webpay')}",
        data: {
          page: page
        },
        success: function (resp, status, xhr) {
          avalon.log(resp);
          if (resp.errno == 0) {
            vm.page = resp.data.page * 1;
            vm.size = resp.data.size * 1;
            vm.total = resp.data.total * 1;
            vm.rows.removeAll();
            vm.rows.pushArray(resp.data.rows);
            vm.RoomCard = resp.data.info.RoomCard;
          }
        }
      });
    },
    tapFirst: function () {
      avalon.log("tapFirst");
      this.ajaxPage(1);
      return false;
    },
    tapPre: function () {
      avalon.log("tapPre");
      var page = this.page - 1;
      page = page > 0 ? page : 1;
      this.ajaxPage(page);
      return false;
    },
    tapNext: function () {
      avalon.log("tapNext");
      var page = this.page + 1;
      page = page > this.totalPage ? this.totalPage : page;
      this.ajaxPage(page);
      return false;
    },
    tapEnd: function () {
      avalon.log("tapEnd");
      this.ajaxPage(this.totalPage);
      return false;
    },
    tapCard: function (idx) {
      this.curr = idx;
    },
    tapPay: function () {
      if (this.card.length <= 0) {
        return $.alert('面额未定义');
      }
      var GoodID = this.curr;
      $.modal({
        title: "支付方式",
        text: "选择你的支付方式",
        buttons: [
          {text:"支付宝",onClick:function(){vm.jumpOrder(1,GoodID);}},
          {text:"微信支付",onClick:function(){vm.jumpOrder(2,GoodID);}},
          {text:"取消",className:"default"}
        ]
      });
    },
    jumpOrder: function (PayChannel , GoodID) {
      var PURL = {:json_encode($PURL, JSON_UNESCAPED_UNICODE)};
      var data = $.param({
        UserID: '{$Agent.UserID}',
        Channel: '{$Agent.Channel}',
        KindID: '{$Agent.PayLv}',
        GoodID: GoodID,
        Type: 2,
        meta_option:"{s:'WAP', n:'京东官网', id:'https://m.jd.com'}",
        XDEBUG_SESSION_START: 1
      });
      console.log(data);
      window.location.href = PURL[PayChannel] + "?" + data;
      return;
    }
  });
  avalon.log(JSON.parse(JSON.stringify(vm)));
  avalon.scan(document.body);
});
</script>
{/block}